<template>
    <div class="rmplCard">
        <div class="title">
            <div class="title-left"><i class="left-logo"></i>需求品类</div>
            <div class="title-right"><i class="right-logo"></i>需求量</div>
        </div>
        <div class="contain" v-for="item,i in rmpldata" :key="i" @click="changeState($event)">
            <div class="left">{{item.title}}</div>
            <div class="right">{{ item.num }}</div>
        </div>
    </div>
</template>
<script>
export default {
    props: [ 'rmpldata' ],
    data() {
        return {

        }
    },
    methods: {
        changeState($event){
            let card = document.querySelectorAll('.contain');
            card.forEach((item) => {
                item.classList.remove('ative');
            })
            $event.currentTarget.classList.add('ative');
        }
    }
}
</script>
<style lang="less" scoped>
    .rmplCard{
        width: 7.05rem;
        height: 3.45rem;
        .title{
            width: 7.06rem;
            height: 0.7rem;
            border-radius: 0.1rem 0.1rem 0 0;
            background-image: linear-gradient(90deg, #FF7549 0%, #EBB75F 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.24rem;
            font-weight: bold;
            color: #FFFFFF;
        }
        .title-left{
            margin-left: 0.22rem;
        }
        .title-right{
            margin-right: 0.22rem;
        }
        .left-logo{
            display: inline-block;
            margin-right: 0.04rem;
            width: 0.2rem;
            height: 0.2rem;
            background: url(@/assets/imgs/图标-热门品类-需求品类.png) no-repeat;
            background-size: contain;
        }
        .right-logo{
            display: inline-block;
            margin-right: 0.04rem;
            width: 0.2rem;
            height: 0.2rem;
            background: url(@/assets/imgs/图标-热门品类-需求量.png) no-repeat;
            background-size: contain;
        }
        .contain{
            width: 7.06rem;
            height: 0.48rem;
            background-color: #fff;
            margin-top: 0.07rem;
            font-size: 0.2rem;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.64rem 0 0.44rem;
        }
        .contain.ative{
            box-shadow: 0 0.05rem 0.13rem 0 rgba(0,0,0,0.13);
            font-size: 0.2rem;
            color: #F07842;
        }
    }
</style>